<template>
  <div class="container">
    <!-- 学科管理 -->
    <el-card>
      <!-- 公共头部 -->
      <PageTools
        :label="label"
        :show-before="false"
        :show-after="true"
        :RowoneRight="false"
        @updateSubject="updateSubject"
        :total="page.total"
      >
      </PageTools>
      <!-- table表格 -->
      <el-table :data="list" style="width: 100%">
        <el-table-column type="index" label="序号"> </el-table-column>
        <el-table-column prop="subjectName" label="学科名称"> </el-table-column>
        <el-table-column prop="username" label="创建者"> </el-table-column>
        <el-table-column prop="addDate" label="创建日期">
          <template #default='{row}'>{{row.addDate|parseTime}}</template>
        </el-table-column>
        <el-table-column prop="isFrontDisplay" label="前台是否显示">
             <template #default='{row}'>{{row.isFrontDisplay?'是':'否'}}</template>
        </el-table-column>
        <el-table-column prop="twoLevelDirectory" label="二级目录">
        </el-table-column>
        <el-table-column prop="tags" label="标签"> </el-table-column>
        <el-table-column prop="totals" label="题目数量"> </el-table-column>
        <el-table-column prop="address" label="操作" width="250">
          <template slot-scope="{ row }">
            <el-button type="text" size="small" @click="$router.push(`/subjects/directorys?subjectID=${row.id}&name=${row.subjectName}`)">学科分类</el-button>
            <el-button type="text" size="small" @click="$router.push(`/subjects/tags?subjectID=${row.id}&name=${row.subjectName}`)">学科标签</el-button>
            <el-button type="text" size="small" @click="updateSubject(row)">修改</el-button>
            <el-button type="text" size="small" @click="deleteSubject(row.id)"
              >删除</el-button
            >
          </template>
        </el-table-column>
      </el-table>
      <!-- 分页 -->
      <el-row type="flex" justify="end" style="margin-top: 20px">
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="page.page"
          :page-size="page.pagesize"
          layout=" prev, pager, next, sizes,jumper"
          background
        >
        </el-pagination>
      </el-row>
    </el-card>
    <!-- 修改、新增学科弹层 -->
    <SubjectsRevise :form='form' :dialogFormVisible.sync="dialogFormVisible"
    @getSubjectsList="getSubjectsList"  :total="page.total"></SubjectsRevise>
  </div>
</template>

<script>
import PageTools from '@/components/PageTools'
// 修改、新增学科弹层
import SubjectsRevise from '../components/subjects-revise.vue'
import {
  list,
  simple,
  detail,
  add,
  update,
  remove
} from '@/api/hmmm/subjects.js'
export default {
  components: {
    PageTools,
    SubjectsRevise
  },
  data () {
    return {
      label: '学科名称',
      page: {
        page: 1, // 当前页数
        pagesize: 10, // 每页条数
        subjectName: '', // 学科名称
        total: 0 // 总数
      },
      list: [], // 表格数据
      dialogFormVisible: false,
      form: {}
    }
  },
  created () {
    // 获取表格数据--学科列表
    this.getSubjectsList()
  },
  methods: {
    // 获取表格数据--学科列表
    async getSubjectsList () {
      const { data: res } = await list(this.page)
      this.list = res.items
      this.page.total = res.counts
    },
    // 删除
    deleteSubject (id) {
      this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(() => {
          remove({ id }).then(() => {
            // 重新渲染页面
            this.getSubjectsList()
            this.$message({
              type: 'success',
              message: '删除成功!'
            })
          })
        })
        .catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          })
        })
    },
    // 修改、新增学科
    updateSubject (row) {
      // 当前行数据要传给子组件
      if (row) {
        // 修改
        this.form = { ...row }
      } else {
        this.form = {}
      }
      this.dialogFormVisible = true
    },

    // 翻页
    handleCurrentChange (newPage) {
      this.page.page = newPage
      // 重新渲染页面
      this.getSubjectsList()
    },
    // 每页条数发生变化
    handleSizeChange (newSize) {
      this.page.pagesize = newSize
      // 重新渲染页面
      this.getSubjectsList()
    }
  }
}
</script>

<style scoped lang='less'></style>
